<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-01-21 
 -->


<template>
  <div class="loading" v-show="data.isLoading">
    <Loading :progress="data.progress"></Loading>
  </div>
  <div class="product" v-show="!data.isLoading" id="product">
    <div
      :class="['desc-list', { active: data.descIndex === i }]"
      v-if="data.products[data.pIndex]"
      v-for="desc, i in data.products[data.pIndex].desc"
    >
      <h1 class="title">{{ desc.title }}</h1>
      <p class="content">{{ desc.content }}</p>
    </div>
    <div class="prod-list" :class="{ show: store.state.isFullScreen }">
      <h1>
        <SketchOutlined />产品推荐
      </h1>
      <div class="products">
        <div
          :class="['prod-item', { active: i === data.pIndex }]"
          v-for="prod, i in data.products"
          @click="changeMode(prod, i)"
        >
          <div class="prod-title">{{ prod.title }}</div>
          <div class="img">
            <img :src="prod.imgsrc" :alt="prod.title" />
          </div>
          <a-button type="primary" block @click.stop="addBuycart(prod)">
            <template #icon>
              <ShoppingCartOutlined />
            </template>加入购物车
          </a-button>
        </div>
      </div>
    </div>
    <div class="scene-list" :class="{ hide: store.state.isFullScreen }">
      <h3>
        <RadarChartOutlined />切换使用场景
      </h3>
      <div class="scenes">
        <div :class="['scene-item']" v-for="scene, i in data.scenes" @click="changeHdr(scene, i)">
          <img
            :class="{ active: i === data.sceneIndex }"
            :src="`./files/hdr/${scene}.jpg`"
            alt="scene"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Loading from "@/components/loading.vue"
import { onMounted, reactive } from 'vue'
import { GETPRODUCTS } from '@/api'
import { useRoute } from 'vue-router';
import { SketchOutlined, RadarChartOutlined, ShoppingCartOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import Base3d from "../../utils/base3D";
const route = useRoute();
const store = useStore();
const data = reactive({
  product: [],
  isLoading: true,
  products: [],
  scenes: [],
  pIndex: 0,
  sceneIndex: 0,
  Base3d: {},
  descIndex: 0,
  progress: 0,
});
function addBuycart(prod) {
  const product = { ...prod, num: 1 };
  let index = 0;
  const isExist = store.state.buycarts.some((item, idx) => {
    if (product.id === item.id) {
      index = idx;
      return true;
    };
    return false;
  });
  if (isExist) {
    store.commit("addBuycartsNum", index);
  } else {
    store.commit("addBuycarts", product);
  }
}
function changeMode(prod, i) {
  data.isLoading = true;
  data.pIndex = i;
  data.Base3d.setModel(prod.modelName);
}
function changeHdr(scene, i) {
  data.isLoading = true;
  data.sceneIndex = i;
  data.Base3d.setEnvMap(scene);
}
function LoadingFinish() {
  data.isLoading = false;
}
onMounted(async () => {
  const { hdr, list } = await GETPRODUCTS();
  data.products = list;
  data.scenes = hdr;
  data.Base3d = new Base3d("#product", LoadingFinish);
  data.Base3d.onProgress(e => {
    const progressNum = e.loaded / e.total;
    data.progress = progressNum.toFixed(2) * 100;
    setTimeout(() => {
      (data.progress > 90) && LoadingFinish();
    }, 200);
  });
});

window.addEventListener("mousewheel", (e) => {
  if (e.deltaY > 0) store.commit('setFullScreen', true);
  if (e.deltaY < 0) store.commit('setFullScreen', false);
});
window.addEventListener("mousewheel", () => {
  const duration = data.Base3d.animateAction._clip.duration
  const time = data.Base3d.animateAction.time;
  const index = Math.floor(time / duration * 4);
  data.descIndex = index;
})
</script>

<style lang='scss' scoped>
.product {
  .desc-list {
    @apply fixed z-[9999] bg-white bg-opacity-50 w-[600px] h-auto top-[100px] left-1/2 ml-[-300px] transition-all duration-500 p-4 translate-x-[-100vw];
    &.active {
      @apply translate-x-0;
    }
    .title {
      @apply text-xl font-black;
    }
    .content {
    }
  }
  .prod-list {
    @apply w-[300px] h-screen py-14 fixed z-[1000] transition-all duration-500 bg-white left-0 top-0;
    .products {
      @apply flex flex-col justify-center items-center;
      .prod-item {
        @apply w-[250px] flex flex-col justify-center items-center text-center bg-white rounded-[20px] overflow-hidden my-2.5 shadow-md shadow-slate-600 transition-all duration-300;

        &.active {
          @apply shadow-[5px_5px_10px_#666,0_0_20px_red];
        }
        &:hover {
          @apply -translate-y-[5px] bg-slate-400 shadow-[5px_5px_10px_#666,0_0_20px_orangered]; //box-shadow: 5px 5px 10px #666, 0, 0, 20px yellow;
        }
        .title {
          @apply py-5;
        }
        img {
          @apply w-[190px];
        }
      }
    }
    h1 {
      @apply text-xl font-black py-2.5 pl-[25px] pr-0;
    }
  }
  .scene-list {
    @apply w-[300px] h-screen py-14 fixed z-[1000] transition-all duration-500 bg-white right-0 top-0;
    h3 {
      @apply text-xl font-black px-7;
    }
    .scenes {
      @apply flex flex-col justify-center items-center;
      .scene-item {
        @apply py-1.5;
        img {
          @apply w-[250px] rounded-[10px] shadow-[5px_5px_10px_#666] transition-all duration-300;
          &.active {
            @apply shadow-[5px_5px_10px_#666,0_0_20px_red];
          }
          &:hover {
            @apply -translate-y-[5px];
          }
        }
      }
    }
  }
  .show {
    @apply -translate-x-full;
  }
  .hide {
    @apply translate-x-full;
  }
}
</style>
